<template>
  <div>
    <!-- 搜索栏 -->
    <!-- <el-card id="search"> -->
    <!-- <el-row> -->
    <!-- <el-col :span="24"> -->
    <!-- <el-input
            v-model="searchModel.user_id"
            placeholder="用户id"
            clearable
          />
          <el-button type="primary" round icon="el-icon-search" @click="getMenuTreeAll">查询</el-button> -->
    <!-- <div style="height: 30px"></div> -->
    <!-- </el-col> -->
    <!-- <el-col :span="4" align="right">
          <el-button type="primary" icon="el-icon-plus" circle @click="openEditUI(null)" />
        </el-col> -->
    <!-- </el-row> -->
    <!-- <el-button
        style="position: absolute; right: 30px; top: 20px"
        type="primary"
        icon="el-icon-plus"
        circle
        @click="openEditUI(null)"
      /> -->
    <!-- </el-card> -->

    <!-- 结果列表 -->
    <el-card>
      <div style="float: right">
        <!-- style="position: absolute; right: 30px; top: 20px" -->
        <!-- <el-button
          type="primary"
          icon="el-icon-plus"
          circle
          @click="openEditUI(null)"
        /> -->
        <el-button type="primary" plain @click="openEditUI(null)">
          <i class="el-icon-plus" />
          新增菜单</el-button
        >
      </div>
      <el-table
        :data="userList"
        stripe
        style="width: 100%"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <!-- <el-table-column label="菜单" width="60" /> -->
        <!-- <el-table-column label="#" width="80">
          <template slot-scope="scope">
            {{
              (searchModel.page - 1) * searchModel.pageSize + scope.$index + 1
            }}
          </template>
        </el-table-column> -->
        <el-table-column prop="name" label="菜单名称" width="160" />
        <el-table-column prop="icon" label="图标名称" width="110" />
        <!-- <el-table-column prop="icon" label="图标" width="80" /> -->
        <el-table-column prop="icon" label="图标" width="90">
          <template slot-scope="scope">
            <!-- <span style="background-color:'';display: inline-block;padding: 2px;"> -->
            <SvgIcon :icon-class="scope.row.icon" />
            <!-- </span> -->
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="70" />
        <!-- <el-table-column prop="id" label="菜单id" width="80" /> -->
        <!-- <el-table-column prop="pid" label="菜单上级id" width="100" /> -->
        <el-table-column prop="status" label="菜单状态" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">启用</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="菜单类型" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type == 0">板块</el-tag>
            <el-tag v-else-if="scope.row.type == 1" type="success">模块</el-tag>
            <el-tag v-else-if="scope.row.type == 2" type="warning">功能</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="identification" label="权限标识" width="120" /> -->
        <!-- <el-table-column prop="memo" label="描述" /> -->
        <el-table-column prop="url" label="组件路由" width="180" />
        <el-table-column prop="created_at" label="创建时间" />
        <el-table-column prop="updated_at" label="更新时间" />
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" circle @click="openEditUI(scope.row.id)" />
            <el-button type="danger" icon="el-icon-delete" size="mini" circle @click="deleteUser(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页组件 -->
    <!-- <el-pagination
      :current-page="searchModel.page"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    /> -->
    <!-- 用户信息编辑对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      @close="clearForm"
    >
      <el-form ref="userFormRef" :model="userForm" :rules="rules">
        <el-form-item label="类型" :label-width="formLabelWidth">
          <!-- @change="handleSelectTypeChange" -->
          <el-select
            v-model="userForm.type"
            placeholder="请选择类型"
            clearable
          >
            <el-option
              v-for="item in myType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!-- <el-select
          style="display:none"
          hidden
          v-model="selectedItem"
          placeholder="请选择"
          clearable
        >
        </el-select> -->
        <el-form-item label="上级菜单" prop="pid" :label-width="formLabelWidth">
          <el-select
            ref="selectUpResId"
            v-model="selectedItem"
            placeholder="请选择上级菜单"
            class="treeselect-main"
            clearable
            @change="handleSelectChange"
          >
            <el-option
              :key="userForm.pid"
              hidden
              :value="userForm.pid"
              :label="selectedItem"
            />
            <el-tree
              :data="userList"
              :props="defaultProps"
              :expand-on-click-node="false"
              :check-on-click-node="true"
              :highlight-current="true"
              :current-node-key="userForm.currentKey"
              @node-click="handleNodeClick"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="菜单启用" :label-width="formLabelWidth">
          <!-- @change="changeStatus" -->
          <el-switch
            v-model="userForm.status"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="菜单名称" prop="name" :label-width="formLabelWidth">
          <el-input v-model="userForm.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="路由" prop="url" :label-width="formLabelWidth">
          <el-input v-model="userForm.url" autocomplete="off" />
        </el-form-item>
        <!-- <el-form-item label="图标" prop="icon" :label-width="formLabelWidth">
          <el-input v-model="userForm.icon" autocomplete="off" />
        </el-form-item> -->
        <el-form-item label="图标" prop="icon" :label-width="formLabelWidth">
          <el-select v-model="userForm.icon" placeholder="请选择图标" >
            <el-option v-for="icon in icons" :key="icon" :label="icon" :value="icon">
              <SvgIcon :icon-class="icon" />
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sort" :label-width="formLabelWidth">
          <el-input v-model="userForm.sort" autocomplete="off" />
        </el-form-item>
        <el-form-item label="权限标识符" :label-width="formLabelWidth">
          <el-input v-model="userForm.identification" autocomplete="off" />
        </el-form-item>
        <el-form-item label="备注" prop="memo" :label-width="formLabelWidth">
          <el-input v-model="userForm.memo" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveMenu">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import menuApi from "@/api/menu";
// import menuApi from "@/api/user";
import SvgIcon from "@/components/SvgIcon/index.vue";
// import selectTree from "./template/treeMenu.vue";
export default {
  components: {
    SvgIcon,
    // selectTree,
  },
  data() {
    // var checkaccount = (rule, value, callback) => {
    //   var reg =
    //     /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/;
    //   if (!reg.test(value)) {
    //     return callback(new Error("邮箱格式错误"));
    //   }
    //   callback();
    // };
    return {
      icons: ['area', 'base', 'car', 'dashboard', 'example', 'exit-fullscreen', 'eye-open', 'eye', 'form', 'fullscreen', 'juan', 'link', 'menu', 'nested', 'password', 'roleManage', 'spec', 'sys', 'table', 'tree_1', 'tree', 'user', 'userManage'],
      selectedItem: '',
      treeData: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
      ],
      treeProps: {
        children: "children",
        label: "label",
      },
      defaultProps: {
        children: "children",
        label: "name",
      },
      myType: [
        {
          value: 0,
          label: "板块",
        },
        {
          value: 1,
          label: "模块",
        },
        {
          value: 2,
          label: "功能",
        },
      ],
      pid: [
        {
          value: 0,
          label: "板块",
        },
        {
          value: 1,
          label: "模块",
        },
        {
          value: 2,
          label: "功能",
        },
      ],
      status: [
        {
          value: -1,
          label: "不限",
        },
        {
          value: 1,
          label: "启用",
        },
        {
          value: 0,
          label: "禁用",
        },
      ],
      formLabelWidth: "130px",
      userForm: {
        type: 1,
        pid: 0,
      },
      dialogFormVisible: false,
      title: "",
      total: 0,
      searchModel: {
        page: 1,
        pageSize: 5,
      },
      userList: [],
      userList2: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      rules: {
        account: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 50,
            message: "长度在 3 到 50 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入登录初始密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
        // status: [
        //   { required: true, message: "请", trigger: "blur" },
        //   { validator: checkaccount, trigger: "blur" },
        // ],
        // account: [
        //   { required: true, message: "请输入描述", trigger: "blur" },
        //   { validator: checkaccount, trigger: "blur" },
        // ],
      },
    };
  },
  created() {
    this.getMenuTreeAll();
  },
  methods: {
    handleNodeClick(node) {
      // this.selectedItem = node.name;
      // 选中需要绑定的id，赋值给 this.queryParams.pid
      this.selectedItem = node.name;
      this.userForm.pid = node.id;
      this.$refs.selectUpResId.blur(); // 选中后隐藏下拉框
      console.log(222, node);
    },
    handleSelectChange(value) {
      console.log(111);
      // 在这里可以执行一些与选择值相关的操作
      // 例如更新数据或其他操作
      // 此处也可关闭下拉框，但需要注意防止重复关闭
      this.$refs.selectUpResId.blur(); // 选中后隐藏下拉框
    },
    handleSelectTypeChange(value) {
      console.log(value, 'value');
      const item = this.myType.filter(item => item.value === value)[0]
      console.log(item, 'item');
      this.userForm.myType = item.label
      // 在这里可以执行一些与选择值相关的操作
      // 例如更新数据或其他操作
      // 此处也可关闭下拉框，但需要注意防止重复关闭
      // this.$refs.selectUpResId.blur(); // 选中后隐藏下拉框
    },
    // 修改启用状态
    changeStatus(e) {
      console.log(e, "status");
      const status = e ? "启用" : "禁用";
      this.$confirm(`您确认${status}菜单?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(this.userForm, "this.userForm");
          menuApi.updateUserStatus(this.userForm).then((response) => {
            this.$message({
              type: "success",
              // message: response.msg,
              message: status + "成功",
            });
            // this.getMenuTreeAll();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已禁用用户",
          });
        });
    },
    deleteUser(menu) {
      this.$confirm(`您确认删除菜单 ${menu.name} ?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          menuApi.deleteMenuById(menu.id).then((response) => {
            this.$message({
              type: "success",
              // message: response.msg,
              message: "删除成功",
            });
            this.getMenuTreeAll();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    saveMenu() {
      // 触发表单验证
      this.$refs.userFormRef.validate((valid) => {
        if (valid) {
          // 提交请求给后台
          menuApi.saveMenu({ ...this.userForm, pid: this.userForm.pid ? this.userForm.pid : 0 }).then((response) => {
            // 成功提示
            this.$message({
              // message: response.msg,
              message: this.userForm.id ? "修改成功" : "添加成功",
              type: "success",
            });
            // 关闭对话框
            this.dialogFormVisible = false;
            // 刷新表格
            this.getMenuTreeAll();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    clearForm() {
      this.userForm = {};
      this.$refs.userFormRef.clearValidate();
    },
    openEditUI(id) {
      this.userForm = {
        // myType: 1
      };
      if (id == null) {
        this.title = "新增菜单";
        this.selectedItem = ''
      } else {
        this.title = "修改菜单";
        // 根据id查询用户数据！！后端
        // menuApi.getUserById(id).then((response) => {
        //   this.userForm = response.data;
        // });
        // 根据分页筛选
        // 递归查询
        // this.userForm = this.userList.filter((item) => item.id === id)[0];
        this.findUserByIdRecursive(this.userList, id);
        console.log(this.userForm, 'userForm');
      }
      this.dialogFormVisible = true;
    },
    findUserByIdRecursive(userArray, id) {
      for (let i = 0; i < userArray.length; i++) {
        const user = userArray[i];
        if (user.id === id) {
          this.userForm = { ...user };
          if (user.pid === 0) {
            // this.selectedItem = user.name;
            // this.selectedItem = 'PC菜单';
            // this.userForm.myType = user.type;
          } else {
            this.findUserByIdName(this.userList, user.pid);
          }
          return;
        }
        if (user.children && user.children.length > 0) {
          this.findUserByIdRecursive(user.children, id);
        }
      }
    },
    findUserByIdName(userArray, pid) {
      for (let i = 0; i < userArray.length; i++) {
        const user = userArray[i];
        console.log(user, 'user--');
        if (user.id === pid) {
          console.log(user, 'user--!!');
          this.selectedItem = user.name;
          console.log(this.selectedItem, 'this.selectedItem--!!');
          return;
        }
        if (user.children && user.children.length > 0) {
          this.findUserByIdName(user.children, pid);
        }
      }
    },
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize;
      this.getMenuTreeAll();
    },
    handleCurrentChange(page) {
      this.searchModel.page = page;
      this.getMenuTreeAll();
    },
    getMenuTreeAll() {
      console.log(this.searchModel, "this.searchModel");
      menuApi.getMenuTreeAll(this.searchModel).then((response) => {
        //
        // console.log(response.data, 'response.data');
        this.userList = response.data;
        this.total = response.data.total;
      });
    },
  },
};
</script>

<style>
#search .el-input {
  width: 200px;
  margin-right: 10px;
}

.el-dialog .el-input {
  width: 85%;
}
</style>

<!-- [
  {
    "id": 1,
    "pid": 0,
    "status": 1,
    "type": 0,
    "code": "A01",
    "name": "基础管理",
    "sort": 0,
    "children": [
      {
        "id": 2,
        "pid": 1,
        "status": 1,
        "type": 1,
        "code": "A0102",
        "name": "用户管理",
        "identification": null,
        "sort": 2,
        "children": []
      },
      {
        "id": 6,
        "pid": 1,
        "status": 1,
        "type": 0,
        "code": "A0101",
        "name": "菜单管理",
        "sort": 1,
        "children": []
      }
    ]
  },
  {
    "id": 3,
    "pid": 0,
    "status": 1,
    "type": 0,
    "code": "B01",
    "name": "会员管理",
    "sort": 0,
    "children": [
      {
        "id": 4,
        "pid": 3,
        "status": 1,
        "type": 1,
        "code": "B0101",
        "name": "会员列表",
        "sort": 0,
        "children": [
          {
            "id": 5,
            "pid": 4,
            "status": 1,
            "type": 1,
            "code": "B010101",
            "name": "车辆进出记录",
            "sort": 0,
            "children": []
          }
        ]
      }
    ]
  }
] -->
